<template>
  <div class="wrap" id="app" v-on:mousemove="mousemove" v-on:mouseup="mouseup">
    <!-- 顶部导航 -->
    <v-top :step="step" v-on:to-step="toStep" v-on:showPreview="showPreview"></v-top>
    <router-view/>
    <!-- 预览 -->
    <v-preview v-bind:show="isShowPreview" v-on:showPreview="showPreview"></v-preview>
    <!-- 拖拽显示 -->
    <v-drag-view></v-drag-view>
    <!-- 下拉显示 -->
    <div class="step-next" v-bind:class="{'first-setp-next':step==0}"  v-show="step<2">
      <a href="javascript:;" v-on:click="toStep(step+1)"><img src="../static/img/next.png" /></a>
    </div>
  </div>
</template>

<script>
import top from './components/top'
import preview from './components/preview'
import dragView from './components/drag-view'
import Utils from './utils'

export default {
  name: 'formbuilder',
  components: {
    'v-top': top,
    'v-preview': preview,
    'v-drag-view':dragView
  },
  data:function(){
    return {
      step:this.$route.path=='/headers' ? 0 : this.$route.path=='/main' ? 1 : 2,
      isShowPreview:false
    }
  },
  methods: {
    showPreview:function(show){
      if(show){
        Utils.item_selected(this.$pageView.formItems,'final-place',false)
      }
      this.isShowPreview = show
    },
    mousemove: function (event){
      if (this.$dragView.styleObject.display === ''){
        this.$dragView.styleObject.top= (event.clientY + 2) + 'px'
        this.$dragView.styleObject.left= (event.clientX + 2) + 'px'
        var placeItem = Utils.get(this.$pageView.formItems,'final-place')
        Utils.item_selected(this.$pageView.formItems,'final-place',true)
      }
    },
    mouseup:function(){
      if (this.$dragView.styleObject.display === ''){
        this.$dragView.styleObject.display = 'none'
      }
    },
    toStep:function(i){
      this.step=i
      Utils.item_selected(this.$pageView.formItems,'final-place',false)
      Utils.toStep(i)
    }
  }
}
</script>

<style src="../static/css/style.css"></style>
<style src="../static/css/iconfont.css"></style>
